<template>
  <view class="withdrawal">
    <view class="withdrawal-top">
      <view class="" style="margin: 40rpx 0"
        >可提现金额：<text style="color: #343a40; font-weight: 700; font-size: 28rpx"
          >￥{{ accountinfo.balance }}</text
        ></view
      >
      <view class="" style="color: #343a40; font-weight: 700">输入要提现金额</view>
      <view
        class=""
        style="display: flex; margin: 30rpx 0; padding-bottom: 40rpx; align-items: center"
      >
        <input
          type="number"
          placeholder="0"
          @input="oninput"
          style="font-size: 60rpx; border-bottom: 1px solid #cecece; width: 400rpx; color: #000"
          v-model="form.balance"
        />
        <text style="color: #2583ff" @click="form.balance = accountinfo.balance">全部提现</text>
      </view>
    </view>
    <view class="withdrawal-bottom">
      <text>选择提现账号</text>
      <view class="withdrawal-Way" v-if="withdrawal.name" @click="choose">
        <view class="" v-if="withdrawal.cate == 10">{{ withdrawal.bank }}</view>
        <view class="" v-else-if="withdrawal.cate == 20">支付宝</view>
        <view class="" v-else>微信</view>
        <view class=""
          >{{ withdrawal.name }}
          <text v-if="withdrawal.cate == 10">({{ withdrawal.account }})</text>
        </view>
      </view>
      <view class="withdrawal-Way" style="position: relative" @click="choose" v-else>
        <view class="arrow">选择</view>
      </view>
    </view>
    <button class="button" @tap="onsubmit">提交</button>
  </view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { getinfo, getwithdrawal, tiixan, withdrawalstatus } from '@/services/home'
import { nextTick, ref } from 'vue'

const form = ref({
  balance: '' as any,
})
const accountinfo = ref({
  balance: '' as any,
})
const oninput = (e: any) => {
  // 一定要加nextTick，否则特殊情况的更改不生效【如：000时，更改为0】
  nextTick(() => {
    let value = e.detail.value
    // 如果当前输入为空，直接允许清空
    if (!value) {
      form.value.balance = ''
    } else if (value?.charAt(0) === '0' && value.charAt(1) && value.charAt(1) !== '.') {
      // // 1. 当第一位为0时，只能输入小数点【第二位必须是小数点】
      value = '0'
    }
    value = value.replace(/[^\d.]/g, '') // 清除"数字"和"."以外的字符
    value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
    value = value.match(/^\d*(\.?\d{0,2})/g)[0] || '' // 保留2位小数
    form.value.balance = value
  })
}
const onsubmit = async () => {
  if (!form.value.balance) {
    uni.showToast({
      title: '请输入要提现的金额',
      icon: 'none',
    })
    return
  }
  const res = await tiixan({ price: form.value.balance, accountId: withdrawal.value.id })
  if (res.success) {
    const result = await withdrawalstatus()
    if (result.success) {
      getuserinfo()
      form.value.balance = ''
      uni.showToast({
        title: result.data.queMessage,
        icon: 'none',
      })
    }
  }
}
const getuserinfo = async () => {
  const res = await getinfo()
  if (res.success) {
    accountinfo.value = res.data
  }
}
const choose = () => {
  uni.redirectTo({
    url: '/pagesMember/withdrawal-account/withdrawal',
  })
}
const withdrawal = ref({
  id: '',
  bank: '',
  name: '',
  account: '',
  isDefault: '',
})
const getuserwithdrawal = async () => {
  const res = await getwithdrawal()
  const currentPage = getCurrentPages().pop()
  const id = currentPage.$page.options.id
  if (res.success) {
    for (var item of res.data) {
      if (id == item.id) {
        withdrawal.value = item
        break
      } else if (item.isDefault) {
        withdrawal.value = item
      }
    }
  }
}
onShow(async () => {
  await Promise.all([getuserwithdrawal(), getuserinfo()])
})
</script>

<style lang="scss">
.arrow::after {
  content: '\e6c2';
  position: absolute;
  right: 0rpx;
  top: 50%;
  color: #ccc;
  font-family: 'erabbit' !important;
  font-size: 32rpx;
  transform: translateY(-50%);
}

.withdrawal {
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f5;

  .withdrawal-top {
    padding: 0 40rpx;
    background-color: #fff;
    font-size: 24rpx;
    color: #999999;
  }

  .withdrawal-bottom {
    padding: 40rpx 40rpx 20rpx;
    background-color: #fff;
    font-size: 24rpx;
    color: #999999;

    .withdrawal-Way {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #000;
      padding: 40rpx 0;
      font-size: 24rpx;
    }

    text {
      color: #343a40;
      font-weight: 700;
    }
  }
}

.button {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 80rpx;
  font-size: 28rpx;
  border-radius: 72rpx;
  color: #fff;
  background-color: #1e9fff;
  margin-top: 40rpx;
}
</style>
